<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="flex">
      <div class="plr15">
        <el-date-picker
          v-model="date"
          type="daterange"
          :value-format="formatType"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabled-date="handleDisabledDate"
        />
      </div>
      <el-button
        v-blur
        class="ml15"
        :icon="Search"
        type="primary"
        plain
        @click="handleSearch">
        搜索
      </el-button>
    </div>
    <div class="t">
      <PagerTable
        :table-data="tableData"
        :table-pager="tablePager"
        hide-on-single-page
        @current-page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import PagerTable from '@/components/PagerTable/index.vue'
import type { ITable, IPager } from '@/types/table'
const date = ref<string>('')
// const date2 = ref<string>()
const formatType = ref('YYYY-MM-DD')

const handleSearch = () => {
  console.log('date：', date)
}
// 生成table的列
const tableData = reactive<ITable>({
  data: [
    // {
    //   name: 'name',
    //   date: 'date',
    //   power: 'power',
    //   income: '100'
    // }
  ],
  cols: [
    { label: '计划编号', prop: 'name' },
    { label: '企业名称', prop: 'date' },
    { label: '站点名称', prop: 'income' },
    { label: '站点联系人', prop: 'income' },
    { label: '站点联系人电话', prop: 'income', width: '150' },
    { label: '发起人员', prop: 'income' },
    { label: '执行人员', prop: 'income' },
    { label: '计划开始时间', prop: 'income', width: '150' },
    { label: '计划结束时间', prop: 'income', width: '150' },
    { label: '实际开始时间', prop: 'income', width: '150' },
    { label: '实际结束时间', prop: 'income', width: '150' },
    { label: '当前状态', prop: 'income' },
    { label: '计划说明', prop: 'income' }
  ]
})
const tablePager = reactive<IPager>({
  total: 0,
  currentPage: 1
})
const handlePageChange = () => {}
const handleDisabledDate = (d: Date) => {
  const now = new Date()
  if (d.getTime() - now.getTime() > 0) return true
}
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
.container {
  height: calc(100vh - 6.9rem);
  width: 100%;
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.h444 {
  height: 44.4rem;
}
.eh {
  height: calc(100vh - 6.9rem - 20rem - 3rem - 6rem - 70px);
}
.h100 {
  height: 100%;
}
.st-h {
  height: 20rem;
  // padding: 1.5rem;
  box-sizing: border-box;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input__wrapper) {
  background: transparent;
}
:deep(.el-range-input) {
  --el-text-color-regular: $color;
}
:deep(.el-range-separator) {
  --el-text-color-primary: $color;
}
.t {
  height: calc(100% - 10px);
  width: 100%;
  position: relative;
}
// :deep(.el-table) {
//   --el-table-border: 1px solid #148285;
//   --el-table-bg-color: transparent;
//   --el-table-text-color: $color;
//   --el-table-header-bg-color: rgba($primary_color, 30%);
//   --el-table-tr-bg-color: rgba($primary_color, 30%);
//   --el-table-header-text-color: $color;
//   --el-text-color-secondary: $color;
//   --el-table-border-color: transparent;
//   border: var(--el-table-border);
// }
:deep(.el-button) {
  background: transparent;
}
</style>
